<!DOCTYPE html>
<html>

{include file='public/header'}
<style>
    .layui-input-block {
        display: flex;
        align-items: center;
    }

    .layui-inline {
        margin-bottom: 10px;
    }
</style>

<body>
    <div class="x-body">
        <div class="layui-form layui-row">
            <div class="layui-inline layui-col-md3">
                <label class="layui-form-label w-auto">充值金额：</label>
                <div class="layui-input-block" id="recharge_amount"></div>
            </div>
            <div class="layui-inline layui-col-md3">
                <label class="layui-form-label w-auto">充值笔数：</label>
                <div class="layui-input-block" id="recharge_num"></div>
            </div>
            <div class="layui-inline layui-col-md3">
                <label class="layui-form-label w-auto">消费K币：</label>
                <div class="layui-input-block" id="consume_amount"></div>
            </div>
            <div class="layui-inline layui-col-md3">
                <label class="layui-form-label w-auto">观看数：</label>
                <div class="layui-input-block" id="look_num"></div>
            </div>
            <!-- <div class="layui-inline layui-col-md3">
                <label class="layui-form-label w-auto">公众号ID：</label>
                <div class="layui-input-block" id="official_account_id"></div>
            </div>
            <div class="layui-inline layui-col-md3">
                <label class="layui-form-label w-auto">公众号名称：</label>
                <div class="layui-input-block" id="official_account_name"></div>
            </div>
            <div class="layui-inline layui-col-md3">
                <label class="layui-form-label w-auto">负责人ID：</label>
                <div class="layui-input-block" id="responsibility_person_id"></div>
            </div>
            <div class="layui-inline layui-col-md3">
                <label class="layui-form-label w-auto">负责人名称：</label>
                <div class="layui-input-block" id="responsibility_person_name"></div>
            </div> -->
        </div>

        <div class="layui-tab" lay-filter="changeType">
            <ul class="layui-tab-title">
                <li class="layui-this">充值记录</li>
                <li>消费记录</li>
                <li>观看记录</li>
            </ul>
        </div>
        <div class="layui-tab layui-tab-brief" lay-filter="changeStatus">
            <ul class="layui-tab-title">
                <li class="layui-this" data-value="">全部</li>
                <li data-value="0">待支付</li>
                <li data-value="1">已支付</li>
            </ul>
        </div>
        <table id="userInfo" lay-filter="userInfo"></table>
    </div>
    <script>
        let id = GetQueryString('id')
        Ajax('/cps/recharge/getRechargeType', {type:0}).then(result => {
            let dataParams = {
                type: 1,
                status: '',
                id
            }
            let tableCols=[
                [ //表头
                    { field: 'order_no', title: '商户单号', }
                    , { field: 'wechat_order_no', title: '交易单号', align:'center' }
                    , {
                        title: '充值类型', templet: function (d) {
                            for (let index = 0; index < result.data.length; index++) {
                                const element = result.data[index];
                                if(element.id == d.type){
                                    return element.name
                                }
                            }
                        }, align:'center'
                    }
                    , { field: 'total_fee', title: '充值金额（元）', align:'center' }
                    , {
                        title: '是否支付', templet: function (d) {
                            return d.status == 1 ? '已支付' : '待支付'
                        }, align:'center'
                    }
                    , {
                        title: '下单时间', templet: function (d) {
                            return dayjsFormat(d.created_at)
                        }, align:'center'
                    }
                    , {
                        title: '完成时间', templet: function (d) {
                            return dayjsFormat(d.pay_time)
                        }, align:'center'
                    }
                ],
                [ //表头
                    { field: 'video_id', title: '短剧ID', align:'center' }
                    , { field: 'video_detail_id', title: '剧集ID', align:'center' }
                    , { field: 'video_name', title: '消费短剧名称', align:'center' }
                    , { field: 'sort', title: '消费剧集', align:'center' }
                    , { field: 'money', title: '消费K币', align:'center' }
                    , {
                        title: '消费时间', templet: function (d) {
                            return dayjsFormat(d.created_at)
                        }, align:'center'
                    }
                ],
                [ //表头
                    { field: 'video_id', title: '短剧ID', align:'center' }
                    , { field: 'video_detail_id', title: '剧集ID', align:'center' }
                    , { field: 'video_name', title: '短剧名称', align:'center' }
                    , { field: 'sort', title: '剧集', align:'center' }
                    , {
                        title: '观看时间', templet: function (d) {
                            return dayjsFormat(d.created_at)
                        }, align:'center'
                    }
                ]
            ]
            Ajax('/cps/user/detail', {id}).then(data => {
                var keys = Object.keys(data.data);
                for (var i = 0; i < keys.length; i++) {
                    $(`#${keys[i]}`).html(data.data[keys[i]])
                }
            });
            let params = {
                elem: '#userInfo'
                , toolbar: false
                , url: '/cps/user/getData' //数据接口
                , id: 'userInfo'
                , where :dataParams
                , page: true
                , cols: [tableCols[0]]
            }
            
            layui.use('element', function () {
                var element = layui.element;
                element.on('tab(changeType)', function (data) {
                    dataParams.type = data.index + 1
                    params.cols = [tableCols[data.index]]
                    if(data.index === 0){
                        $('.layui-tab-brief').show()
                    }else{
                        $('.layui-tab-brief').hide()
                    }
                    tableList(params)
                });
            });
            layui.use('element', function () {
                var element = layui.element;
                element.on('tab(changeStatus)', function (data) {
                    dataParams.status = $(this).attr('data-value')
                    tableList(params)
                });
            });
            tableList(params)
        })
        
    </script>
</body>

</html>